<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div th:fragment="interview-process" class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5 >青山区教育局招聘</h5><h5 >面试进度</h5>
                    <span>【</span>第<label style="color: red" id="examRoomId"></label>考场<span>】</span>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <table class="table table-bordered" id="table_interviewProcess">

                    </table>

                </div>
            </div>
        </div>

        <script>
            $(document).ready(function () {
               getExamRoomId();
               buildProcessTable();
            })
            <!--获取考场ID-->
            function getExamRoomId(){
                $.ajax({
                    url:"/interviewProcess/getExamRoomId",
                    type:"POST",
                    success:function (data){
                        $("#examRoomId").text(data);
                    }
                });
            }

            function buildProcessTable(){
                var table_interviewProcess=$('#table_interviewProcess');
                $.ajax({
                    url: "/interviewProcess/getInterviewProcessData",
                    type: "POST",
                    success: function (result) {
                        var progressData = result.data;
                        // 创建表头
                        var thead = $("<thead></thead>");

                        var headTr = $("<tr></tr>");
                        $.each(progressData, function (i, item) {
                            var headStr = "<th>" + i + "</th>";
                            headTr.append(headStr);
                        })

                        thead.append(headTr);
                        table_interviewProcess.append(thead);

                        //创建表格内容
                        var tbody = $("<tbody></tbody>");
                        var bodyTr = $("<tr></tr>");
                        $.each(progressData, function (i, item) {
                            var bodyStr;
                            if (item==-2){
                                bodyStr= "<td style='color: #6f42c1'>" + "缺考" + "</td>";
                            }else if (item==-1){
                                bodyStr= "<td style='color: red'>" + "已结束" + "</td>";
                            }else if (item==0){
                                bodyStr= "<td style='color: green'>" + "进行中" + "</td>";
                            }else {
                                bodyStr= "<td style='color: gray'>" + "未面试" + "</td>";
                            }

                            bodyTr.append(bodyStr);
                        })
                        tbody.append(bodyTr);
                        table_interviewProcess.append(tbody);

                    }
                });
            }
        </script>
    </div>
</div>
</body>
</html>
